﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Alert
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Badge
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Blockquote
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Button
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Tab
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.BadgesModel
@{
    ViewData["Title"] = "Badges";
}

<h2>Badges</h2>

<p>Based on <a href="@BootstrapUrlHelper.GetDocUrl("components/badge/")" target="_blank"> Bootstrap Badge</a>.</p>

<h4>Example</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <h1>Example heading <span abp-badge="Secondary">New</span></h1>
        <h2>Example heading <span abp-badge="Secondary">New</span></h2>
        <h3>Example heading <span abp-badge="Secondary">New</span></h3>
        <h4>Example heading <span abp-badge="Secondary">New</span></h4>
        <h5>Example heading <span abp-badge="Secondary">New</span></h5>
        <h6>Example heading <span abp-badge="Secondary">New</span></h6>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;h1&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span abp-badge=&quot;Secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;h1&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h1&gt;
&lt;h2&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h2&gt;
&lt;h3&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h3&gt;
&lt;h4&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h4&gt;
&lt;h5&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h5&gt;
&lt;h6&gt;Example heading &lt;span class=&quot;badge bg-secondary&quot;&gt;New&lt;/span&gt;&lt;/h6&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-button button-type="Primary">
            Notifications <span abp-badge="Light">4</span>
        </abp-button>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-button button-type=&quot;Primary&quot;&gt;
    Notifications &lt;span abp-badge=&quot;Light&quot;&gt;4&lt;/span&gt;
&lt;/abp-button&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;
  Notifications &lt;span class=&quot;badge bg-light&quot;&gt;4&lt;/span&gt;
&lt;/button&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Contextual variations</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <span abp-badge="Primary">Primary</span>
        <span abp-badge="Secondary">Secondary</span>
        <span abp-badge="Success">Success</span>
        <span abp-badge="Danger">Danger</span>
        <span abp-badge="Warning">Warning</span>
        <span abp-badge="Info">Info</span>
        <span abp-badge="Light">Light</span>
        <span abp-badge="Dark">Dark</span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-badge=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
&lt;span abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span abp-badge=&quot;Success&quot;&gt;Success&lt;/span&gt;
&lt;span abp-badge=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
&lt;span abp-badge=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
&lt;span abp-badge=&quot;Info&quot;&gt;Info&lt;/span&gt;
&lt;span abp-badge=&quot;Light&quot;&gt;Light&lt;/span&gt;
&lt;span abp-badge=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;badge bg-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge bg-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge bg-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge bg-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge bg-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge bg-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge bg-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge bg-dark&quot;&gt;Dark&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Pill badges</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <span abp-badge-pill="Primary">Primary</span>
        <span abp-badge-pill="Secondary">Secondary</span>
        <span abp-badge-pill="Success">Success</span>
        <span abp-badge-pill="Danger">Danger</span>
        <span abp-badge-pill="Warning">Warning</span>
        <span abp-badge-pill="Info">Info</span>
        <span abp-badge-pill="Light">Light</span>
        <span abp-badge-pill="Dark">Dark</span>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;span abp-badge-pill=&quot;Primary&quot;&gt;Primary&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Success&quot;&gt;Success&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Danger&quot;&gt;Danger&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Warning&quot;&gt;Warning&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Info&quot;&gt;Info&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Light&quot;&gt;Light&lt;/span&gt;
&lt;span abp-badge-pill=&quot;Dark&quot;&gt;Dark&lt;/span&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;span class=&quot;badge rounded-pill bg-primary&quot;&gt;Primary&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-secondary&quot;&gt;Secondary&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-success&quot;&gt;Success&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-danger&quot;&gt;Danger&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-warning&quot;&gt;Warning&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-info&quot;&gt;Info&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-light&quot;&gt;Light&lt;/span&gt;
&lt;span class=&quot;badge rounded-pill bg-dark&quot;&gt;Dark&lt;/span&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>Links</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <a href="#" abp-badge="Primary">Primary</a>
        <a href="#" abp-badge="Secondary">Secondary</a>
        <a href="#" abp-badge="Success">Success</a>
        <a href="#" abp-badge="Danger">Danger</a>
        <a href="#" abp-badge="Warning">Warning</a>
        <a href="#" abp-badge="Info">Info</a>
        <a href="#" abp-badge="Light">Light</a>
        <a href="#" abp-badge="Dark">Dark</a>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;a href=&quot;#&quot; abp-badge=&quot;Primary&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; abp-badge=&quot;Dark&quot;&gt;Dark&lt;/a&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;a href=&quot;#&quot; class=&quot;badge bg-primary&quot;&gt;Primary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-secondary&quot;&gt;Secondary&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-success&quot;&gt;Success&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-danger&quot;&gt;Danger&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-warning&quot;&gt;Warning&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-info&quot;&gt;Info&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-light&quot;&gt;Light&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;badge bg-dark&quot;&gt;Dark&lt;/a&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<hr />

@await Component.InvokeAsync("TagHelperProperties", typeof(AbpBadgeTagHelper))